<template>
	<view class="assist">
		<view class="topbac">
			<view class="shopBox">
				<view class="flex_sb">
					<image class="kkjsp ml8" src="https://img.aibbyp.com/wechatUser/kkjsp.png" mode=""></image>
					<view class="flex">
						<text class="info mr12">剩</text>
						<u-count-down class="error" :timestamp="timestamp" format='HH:mm:ss'></u-count-down>
					</view>
				</view>
				<view class="">
					<view class="flex_y_center mt20" v-for="(item,index) in getaddHelpData.goods" :key="index">
						<image class="shopimg" :src="$wanlshop.oss(item.image)" mode=""></image>
						<view class="flex1 overflow_1 ml32">
							<view class="f28 c3 overflow_1">
								{{item.title}}
							</view>
							<view class="cf490 mt16">
								￥{{item.price}}
							</view>
						</view>

					</view>
					<view class="mt20 ff6400">
						本订单可砍至：￥{{getaddHelpData.price}}
					</view>
					<view class="mt20 ff6400 tar f28 fb">
						原订单总价：￥{{$wanlshop.numToMoney(getaddHelpData.old_price)}}
					</view>
				</view>
				<view class="zlBox">
					<view class="f20 ff6400 ml32">
						邀好友助力后可优惠购买（{{getaddHelpData.help_user.length}}/3）
					</view>
					<view class="flex_y_center mt24">

						<block v-for="(i,k) in headers" :key="k">
							<image class="headerImg" :src="$wanlshop.oss(i.avatar)" mode=""></image>
						</block>
						<image @tap="gethelpDetail" class="imgrq ml16" src="https://img.aibbyp.com/wechatUser/rq.png"
							mode=""></image>
						<button open-type="share" class="shareBtn">
							<view class="flex1 tar">
								<image class="imgzhu" src="https://img.aibbyp.com/wechatUser/zhu.png" mode=""></image>
							</view>
						</button>

					</view>
					<view @click="$wanlshop.back(1)" class="f28 fb ff6400 tac pt32 pb12"
						v-if="getaddHelpData.help_user.length >= 3">
						助力成功 返回购买
					</view>
				</view>
				<view class="flex_sb mt32">
					<view class="flex yj">
						<view class="f24">
							原价￥
						</view>
						<view class="f36 fb">
							{{$wanlshop.numToMoney(getaddHelpData.old_price)}}
						</view>
					</view>
					<view class="flex kjh" :class="{'kjh1':getaddHelpData.help_user.length>=3}" @click="gopay">
						<view class="f24">
							砍价后仅￥
						</view>
						<view class="f36 fb">
							{{$wanlshop.numToMoney(getaddHelpData.price)}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="mt24 listBox flex1">
			<u-tabs class="mt12" :list="listTabs" active-color='#FD5241' :is-scroll="false" v-model="currentTabs"
				@change="changeTabs"></u-tabs>
			<scroll-view :scroll-y="true" class="scoll-viewS" @scroll="scroll" @scrolltolower="scrolltolower"
				lower-threshold="200" scroll="scroll" style="touch-action: none;" :scroll-top="scrollTop">
				<view class="pl20 pr20" v-for="(item,index) in listdata" :key="index">
					<view class="flex_y_center  mt24 forBoxhis">
						<image class="avatar" :src="$wanlshop.oss(item.avatar)" mode=""></image>
						<view class="flex1 ml24">
							{{item.nickname}}
						</view>
						<view class="info f20 ml24 mr24">
							{{item.createtime_text}}
						</view>
						<image style="width: 104rpx;height: 36rpx;" src="https://img.aibbyp.com/wechatUser/zzcc.png"
							mode=""></image>
					</view>
				</view>
			</scroll-view>
			<view class="" @click="to_top">
				<u-back-top class="backTop" :scroll-top="old.scrollTop" top="10"></u-back-top>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: '',
				listdata: [],
				currentTabs: 0,
				listTabs: [{
					name: '本期邀请'
				}, {
					name: '历史邀请'
				}],
				timestamp: 1000 * 60 * 30,
				getaddHelpData: {
					help_user: []
				},
				ids: [],
				old: {
					scrollTop: 0
				},
				scrollTop: 0,
				headers: [{
						avatar: '/wechatUser/yqk.png',
					},
					{
						avatar: '/wechatUser/yqk.png',
					},
					{
						avatar: '/wechatUser/yqk.png',
					},
				]
			}
		},
		onLoad() {
			console.log(this.$store.state.statistics.goods_ids);
			this.ids = this.$store.state.statistics.goods_ids
			this.getaddHelp()
		},
		// 添加分享钩子
		onShareAppMessage() {
			return {
				title:'帮我助力一下吧~',
				imageUrl: 'https://img.aibbyp.com/wechatUser/zl.png', // 替换为实际分享图片URL
				path: `pages/tabbarcompotant/index/landlord?assist=${this.ids.join(',')}&invitation_code=${uni.getStorageSync('wanlshop:user').uuid || ''}`,
				success: (res) => {
					console.log('分享成功', res);
					// 分享成功后的操作
				},
				fail: (err) => {
					// 分享失败后的操作
				}
			};
		},
		methods: {

			gopay(order) {
				if (this.getaddHelpData.help_user.length < 3) {
					uni.showToast({
						title: '助力三人后可使用优惠',
						icon: 'none'
					})
					return
				} else {
					let help = order.is_help == 1 ? true : false
					this.$wanlshop.to(
						`/pages/user/money/pay?order_id=${this.ids.join(',')}&order_type=goods&help=${help}`);

				}
			},
			to_top() { // 返回顶部
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			gethistoryHelp() {
				this.$api.get({
					url: '/wanlshop/order/historyHelp',
					data: {
						page: 1,
						limit: 999
					},
					success: res => {
						console.log(res);
						this.listdata = res.data
					}
				})
			},
			changeTabs() {
				if (this.currentTabs == 1) {
					this.listdata = []
					this.gethelpDetail()
				}
				if (this.currentTabs == 0) {
					this.listdata = []
					this.gethistoryHelp()
				}
			},
			getaddHelp() {
				this.$api.post({
					url: '/wanlshop/order/addHelp',
					loadingTip: '加载中...',
					data: {
						ids: this.ids
					},
					success: res => {
						this.gethelpDetail()
					}
				})
			},
			gethelpDetail() {
				this.$api.post({
					url: '/wanlshop/order/helpDetail',
					loadingTip: '加载中...',
					data: {
						ids: this.ids
					},
					success: res => {
						console.log(res);
						this.getaddHelpData = res
						this.listdata = res.help_user
						this.timestamp = Math.round((res.cancel_time * 1000 - new Date().getTime()))
						res.help_user.forEach((a, k) => {
							if (a.nickname && a.avatar) {
								this.headers[k] = a
							}
						})
					}
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.listBox {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.forBoxhis {
		border-bottom: 1rpx solid #D8D8D8;
		padding-bottom: 20rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.shareBtn {
		width: 162rpx;
		height: 58rpx;
		border: none;
		padding: 0;
		background: initial;
	}

	.shareBtn:after {
		display: none;
	}

	.zlBox {
		margin-top: 40rpx;
		background: #FFF2E6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 16rpx 20rpx 16rpx 20rpx;

		.headerImg {
			width: 94rpx;
			height: 94rpx;
			border-radius: 50%;
			margin-left: 20rpx;
		}

		.imgrq {
			width: 32rpx;
			height: 32rpx;
		}

		.imgzhu {
			width: 162rpx;
			height: 56rpx;
		}
	}

	.yj {
		background: #FD5241;
		border-radius: 43rpx 43rpx 43rpx 43rpx;
		width: 264rpx;
		height: 86rpx;
		line-height: 86rpx;
		color: #fff;
		justify-content: center;
	}

	.kjh {
		flex: 1;
		background: #FF944E;
		border-radius: 43rpx 43rpx 43rpx 43rpx;
		width: 264rpx;
		height: 86rpx;
		line-height: 86rpx;
		color: #fff;
		text-align: center;
		margin-left: 26rpx;
		justify-content: center;
	}

	.kjh1 {
		background: #FF6400;
	}

	.ff6400 {
		color: #FF6400;
	}

	.assist {
		display: flex;
		flex-direction: column;
		background: #F4F4F4;
		background-image: url('https://img.aibbyp.com/wechatUser/tbxg.png');
		background-size: 100% 600rpx;
		width: 100%;
		background-repeat: no-repeat;
		padding: 330rpx 20rpx 20rpx;

		.topbac {
			background: rgba(255, 255, 255, 0.5);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 16rpx;

			.shopBox {
				background: #FFFFFF;
				padding: 28rpx 22rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.kkjsp {
					width: 158rpx;
					height: 34rpx;
				}

				.shopimg {
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					width: 92rpx;
					height: 92rpx;
				}

			}
		}
	}
</style>